<template>
  <div class="bg-white p-6 rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-4">查询结果</h2>
    <div class="min-h-[435px]">
      <el-table
        :data="paginatedData"
        border
        style="width: 100%"
        v-loading="loading"
        element-loading-text="查询中..."
        element-loading-background="rgba(255, 255, 255, 0.9)"
        :height="435"
      >
        <el-table-column
          v-for="column in columns"
          :key="column"
          :prop="column"
          :label="getColumnLabel(column)"
          min-width="120"
        />
        <template #empty>
          <div class="py-8">
            {{ loading ? '查询中...' : '暂无查询结果' }}
          </div>
        </template>
      </el-table>
      <div v-if="data && data.length > 0" class="mt-4 flex justify-between items-center">
        <span class="text-sm text-gray-500">
          共 {{ data.length }} 条记录
        </span>
        <div class="flex items-center">
          <el-select
            v-model="pageSize"
            size="default"
            class="mr-4"
            style="width: 110px;"
            @change="handlePageSizeChange"
            popper-class="page-size-dropdown"
          >
            <el-option 
              v-for="size in [10, 20, 50, 100]"
              :key="size"
              :label="`${size}条/页`"
              :value="size"
            />
          </el-select>
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="data.length"
            :page-sizes="[10, 20, 50, 100]"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            small
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const currentPage = ref(1)
const pageSize = ref(10) // 默认每页显示10条

const columns = computed(() => {
  if (props.data.length === 0) return []
  return Object.keys(props.data[0])
})

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return props.data.slice(start, end)
})

// 获取列标签显示名称
const getColumnLabel = (column) => {
  // 获取第一条数据的所有键作为列顺序依据
  const columns = props.data.length > 0 
    ? Object.keys(props.data[0]) 
    : [];

  // 生成自增标签映射表 {key1: "数据1", key2: "数据2"...}
  const autoLabelMap = columns.reduce((acc, key, index) => {
    acc[key] = `数据${index + 1}`;
    return acc;
  }, {});

  // 返回自定义标签或原始键值
  return autoLabelMap[column] || column;
};

const handleCurrentChange = (page) => {
  currentPage.value = page
}

const handlePageSizeChange = (size) => {
  pageSize.value = size
  // 重置到第一页
  currentPage.value = 1
}

// 当数据变化时重置分页
watch(() => props.data, () => {
  currentPage.value = 1
})
</script>

<style scoped>
:deep(.el-table__empty-block) {
  min-height: 435px;
}

:deep(.el-pagination) {
  justify-content: flex-end;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: var(--el-color-primary);
}

:deep(.page-size-dropdown) {
  width: 110px !important;
}

:deep(.el-select-dropdown__item) {
  padding: 0 12px !important;
  min-width: 110px !important;
}

:deep(.el-input__wrapper) {
  width: 110px !important;
}

:deep(.el-input__inner) {
  box-sizing: border-box;
  padding-right: 30px !important;
}
</style> 